<template>
	<view class="container">

		<view class="item flex space-between ">
			<view class=""> 尺寸</view>
			<view class="flex align-center height100" @click="size">
				<text class="lineHeight1 fsize28">{{px}} 像素</text>
				<uni-icons type="forward" size="20"></uni-icons>
			</view>
		</view>
		<view class="item flex space-between mgt-20">
			<view class=""> 颜色</view>
			<view class="flex align-center height100" @click="color1">
				<text class="lineHeight1 fsize28">{{color}}</text>
				<uni-icons type="forward" size="20"></uni-icons>
			</view>
		</view>
		<view class="item flex space-between mgt-20">
			<view class=""> 背景</view>
			<view class="flex align-center height100" @click="bgc1">
				<text class="lineHeight1 fsize28">{{bgc}}</text>
				<uni-icons type="forward" size="20"></uni-icons>
			</view>
		</view>
		<view class="qrcodeImg">
			<image :src="img" mode=""></image>
		</view>
		<view class="text">
			微信扫一扫或长按打开
		</view>
		<view class="bottom">
			<!-- forward -->
			<view class="box2" @click="showShareImageMenu">
				<view class="boximg">
					<image src="/static/images/signIn/share2.png" mode=""></image>
				</view>
				转发
			</view>
			<view class="box2" @click="showShareImageMenu">
				<view class="boximg">
					<image src="/static/images/signIn/Collection.png" mode=""></image>
				</view>
				收藏
			</view>
			<view class="box2" @click="saveInAlbum">
				<view class="boximg">
					<image src="/static/images/signIn/weCart-circle.png" mode=""></image>
				</view>
				保存
			</view>
		</view>

		<!--弹出框 -->
		<view class="float-box" v-if="isSize">
			<view class="box-item" @click="px=880;isSize=false;this.init()">
				880 像素
			</view>
			<view class="box-item bordertop" @click="px=1080;isSize=false;this.init()">
				1080 像素
			</view>
			<view class="box-item bordertop" @click="px=1280;isSize=false;this.init()">
				1280 像素
			</view>
			<view class=" box-item cancel mgt-20" @click="isSize=false">
				取消
			</view>
		</view>
		<!-- 2 -->
		<view class="float-box" v-if="isColor">
			<view class="box-item" @click="color='黑色' ;isColor=false;this.init()">
				黑色
			</view>
			<view class="box-item bordertop" @click="color='红色' ;isColor=false;this.init()">
				红色
			</view>
			<view class="box-item bordertop" @click="color='绿色';isColor=false;this.init()">
				绿色
			</view>
			<view class="box-item bordertop" @click="color='蓝色' ;isColor=false;this.init()">
				蓝色
			</view>
			<view class=" box-item cancel mgt-20" @click="isColor=false">
				取消
			</view>
		</view>

		<!-- 3 -->
		<view class="float-box" v-if="isBgc">
			<view class="box-item" @click="bgc='白色';isBgc=false;this.init()">
				白色
			</view>
			<view class="box-item bordertop" @click="bgc='透明';isBgc=false;this.init()">
				透明
			</view>
			<view class=" box-item cancel mgt-20" @click="isBgc=false">
				取消
			</view>
		</view>

		<view class="mask" @click="isSize=false;isBgc=false;isColor=false" v-if="isSize || isBgc|| isColor"></view>

		<view class="mask bgcRgba08" v-if="isShare" @click="isShare=false"> </view>

		<view class="sendTOFriends" v-if="isShare">
			<view class="sendTOFriends-ccover">
				<!-- <image src="../../static/images/signIn/pic1.jpg" mode=""></image> -->
			</view>



		</view>

	</view>
</template>

<script>
	import Vue from 'vue';
	import {
		signQrcodeBasics
	} from '@/api/activity.js';
	export default {

		data() {
			return {
				px: "880",
				color: "黑色",
				bgc: "白色",
				isSize: false, // 尺寸的 按钮
				isColor: false, //前景色
				isBgc: false, //背景色
				isShare: false, //分享按钮
				code: "",
				img:""   ,  //图片url
			}
		},
		onLoad(options) {
			this.code = options.code
			console.log(this.code, 'custom-qrcode');
		},
		onShow() {
			this.init()

		},
		methods: {
			showShareImageMenu() {
				uni.downloadFile({
					url: this.img,
					success: (res) => {
						uni.showShareImageMenu({
							path: res.tempFilePath
						})
					}
				})
			},
			init() {
				uni.showLoading({
					title:"加载中···"
				})
				signQrcodeBasics({
					data: {
						code: this.code,
						width: this.px,
						color: this.color == "蓝色" ? '#0000FF' : this.color == "红色" ?
							'#FF0000' : this.color == "绿色" ? '#00FF00' : '#000000',
						is_hyaline: this.bgc == "白色" ? "0" : '1'
					}
				}).then(res => {
					if (res.code == 1) {
						console.log(res.data);
						this.img = res.data
						uni.hideLoading()
					}
				})
			},
			size() {
				this.isSize = true
			},
			color1() {
				this.isColor = true
			},
			bgc1() {
				this.isBgc = true
			},
			saveInAlbum() {
				// 调用代码
				Vue.prototype.$uniApi.saveImage(this.img)
			},

		}

	}
</script>
<style lang="scss" scoped>
	.container {
		background-color: #f6f6f6;
		min-height: 100vh;

		.item {
			padding: 0 20upx;
			background-color: #fff;
			height: 70upx;
			font-size: 28upx;
			display: flex;
			align-items: center;
		}


		.qrcodeImg {
			box-shadow: 0 0 20upx #969696;
			margin: 0 auto;
			margin-top: 50upx;
			width: 350upx;
			height: 350upx;

			// background-color: pink;
			image {
				width: 100%;
				height: 100%;
			}
		}

		.text {
			margin-top: 30upx;
			font-size: 28upx;
			color: #333;
			text-align: center;

		}

		.bottom {
			bottom: 0;
			position: fixed;
			height: 220upx;
			width: 100%;
			background-color: #dadada;
			border-radius: 18upx 18upx 0 0;
			display: flex;
			justify-content: space-around;
			box-shadow: 0 0 5upx #eee;

			.box2 {
				margin-top: 20upx;
				text-align: center;
				font-size: 24upx;

				.boximg {
					margin-bottom: 20upx;
					width: 90upx;
					height: 90upx;
					padding: 15upx;
					background-color: #fff;
					border-radius: 8upx;
					margin-top: 30upx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}

		//弹出
		.float-box {
			z-index: 669;
			overflow: hidden;
			position: fixed;
			bottom: 0;
			width: 100%;
			border-radius: 20upx 20upx 0 0;
			font-size: 32upx;
			background-color: #eae7e8;

			.box-item {
				width: 100%;
				height: 100upx;
				line-height: 100upx;
				text-align: center;
				background-color: #fff;
			}

			.bordertop {
				border-top: 1px solid #eee;
			}

		}



	}
</style>
